<template>
    <div class="main-content">
        <section class="brief-info">
            <section class="user-info">
                <img src="@/assets/img/user@1x.png" title="user" />

                <section class="user-detail-info">
                    <div class="username">徐诚</div>
                    <div class="group-info">
                        <span>角色：USER</span>
                        <span>部门：</span>
                    </div>
                </section>
            </section>

            <template v-for="item in statistics.brief">
                <brief-info
                    :icon="item.icon"
                    :description="item.desc"
                    :num="item.number"
                    :bg-color="item.bgColor"
                    :color="item.color"
                    :key="item.key">
                </brief-info>
            </template>
        </section>

        <section class="detail-info">
            <template v-for="item in statistics.detail">
                <detail-info
                    :icon="item.icon"
                    :desc="item.desc"
                    :num="item.number"
                    :from-color="item.fromColor"
                    :to-color="item.toColor"
                    :key="item.key">
                </detail-info>
            </template>
        </section>
    </div>
</template>

<script>
    import { mapState } from 'vuex';

    import BriefInfo from '@/components/brief-info/BriefInfo.vue';
    import DetailInfo from '@/components/detail-info/DetailInfo.vue';

    export default {
        name: 'Dashboard',
        components: {
            BriefInfo,
            DetailInfo,
        },
        computed: {
            ...mapState({
                statistics: (state) => state.dashboard,
            }),
        },
        mounted() {
            this.$store.dispatch('dashboard/loadData');
        },
    };
</script>

<style lang="scss" scoped>
    .main-content {
        display: flex;
        flex-direction: column;
        padding: 36px;

        & > section.brief-info {
            display: flex;
            flex-direction: row;
            margin-bottom: 48px;
            border-bottom: 1px solid #D9E1E8;

            & > .user-info {
                display: flex;
                flex-direction: row;
                margin: 54px 0 52px 36px;
                width: 28%;

                & > section.user-detail-info {
                    display: flex;
                    flex-direction: column;
                    margin-left: 36px;

                    & > div.username {
                        margin-bottom: 12px;
                        font-size: 48px;
                        font-weight: 600;
                        color: rgba(0, 0, 0, .85);
                        letter-spacing: -1px;
                    }

                    & > .group-info {
                        font-size: 16px;
                        font-weight: 400;
                        color: rgba(0, 0, 0, .45);

                        & > span:first-of-type {
                            margin-right: 36px;
                        }
                    }
                }
            }
        }
    }
</style>
